<template>
  <div style="border: 1px solid #DCDFE6;" id="editor">
    <Toolbar
        style="border-bottom: 1px solid #DCDFE6;"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        style="height: 560px; overflow-y: hidden;"
        v-model="html"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
        @onChange="onChange"
    />

  </div>
</template>
 
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

	export default {
    name:'WangEditor',
    components: {Editor, Toolbar},
    props:{
      wangEditorContent:{
        type:String,
      },
      isClear: {
        type: Boolean,
        default: false
      },
      upload_config_id:{
        type:Number,
      },
      isRefrash: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      isRefrash(val) {
        if (val) {
          this.html = this.wangEditorContent
        }
      },
    },
		data() {
		  return {
        editor: null,
        html: this.wangEditorContent,
        toolbarConfig: {
          //toolbarKeys:[""],
          excludeKeys : ['blockquote','fullScreen','codeBlock','undo','redo','bulletedList','todo','numberedList','justifyLeft','justifyRight','justifyCenter','insertLink','insertTable'] //去掉的菜单
        },
        //"blockquote","header1","header2","header3","bold","underline","italic","through",
        //"color","bgColor","clearStyle","group-image","insertVideo"
        //blockquote,header1,header2,header3,bold,underline,italic,through,color,bgColor,clearStyle,group-image,insertVideo
        editorConfig: { placeholder: '请输入内容...',
          MENU_CONF: {
            uploadImage: {

              customUpload: async (file, insertFn) => {
                let resultUrl = await this.customImageUpload(file, file.name, insertFn);
                this.$emit('update:wangEditorContent',this.html)
              },
            },
            uploadVideo: {
              customUpload: async (file, insertFn) => {
                let resultUrl = await this.customImageUpload(file, file.name, insertFn);
                //insertFn(resultUrl);
              },
            }
          }
        },
        mode: 'simple', // or 'simple'
		  }
    },
		mounted() {
      // 模拟 ajax 请求，异步渲染编辑器
      /*setTimeout(() => {
        this.html = ''
      }, 1500)*/
		},
    methods: {
      customImageUpload(file,filename, insertImgFn) {
        let formdata = new FormData()
        formdata.append('file', file)
        formdata.append('edit', true)
        formdata.append('upload_config_id', this.upload_config_id)
        this.$axios.post('/api/base/file/upload', formdata).then(res => {
          insertImgFn(res.data.data.url)
        })
      },
      onCreated(editor) {
        this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        //console.log(this.editor.getAllMenuKeys())
      },
      onChange(editor) {
        this.$emit('update:wangEditorContent', editor.getHtml())
      },
      onDestroyed(editor) { console.log('onDestroyed', editor) },
      onMaxLength(editor) { console.log('onMaxLength', editor) },
      onFocus(editor) { console.log('onFocus', editor) },
      onBlur(editor) { console.log('onBlur', editor) },
      customAlert(inf, type) { window.alert(`customAlert in Vue demo\n${type}:\n${info}`) },
      customPaste(editor, event, callback) {
        console.log('ClipboardEvent 粘贴事件对象', event)
        // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
        // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
        // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）

        // 自定义插入内容
        editor.insertText('xxx')

        // 返回 false ，阻止默认粘贴行为
        event.preventDefault()
        callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）

        // 返回 true ，继续默认的粘贴行为
        // callback(true)
      },
      destory() {
        this.editor.destroy()
      }
    },
    beforeDestroy() {
      const editor = this.editor
      if (editor == null) return
      editor.destroy() // 组件销毁时，及时销毁编辑器
    }
	}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped  lang="scss">
/deep/.w-e-toolbar{
  z-index: 2000 !important;
}
/deep/.w-e-menu {
  z-index: 2000 !important;
}
/deep/.w-e-text-container {
  z-index: 1000 !important;
}

#editor {
  width: 375px;
}
</style>